<!--
 * @Author: lmh
 * @Date: 2021-08-14 16:05:26
 * @LastEditTime: 2021-08-24 14:39:24
 * @LastEditors: lmh
 * @Description: 用户管理
-->
<template>
  <div class="box">
    <div class="form-box">
      <a-form :model="formState" layout="inline">
        <a-form-item label="用户名：">
          <a-input v-model:value="formState.name" />
        </a-form-item>
        <a-form-item label="账号">
          <a-input v-model:value="formState.cardNumber" />
        </a-form-item>
        <a-form-item label="角色">
          <a-select v-model:value="formState.role" placeholder="全部">
            <a-select-option value>全部</a-select-option>
            <a-select-option value="shanghai">操作员</a-select-option>
            <a-select-option value="beijing">一级管理员</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item>
          <a-button type="primary">搜索</a-button>
          <a-button type="primary" style="margin-left: 20px;" @click="handleAddUserClick">添加用户</a-button>
        </a-form-item>
      </a-form>
    </div>
    <div class="table-box">
      <a-table
        :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
        :columns="columns"
        :data-source="tableData"
        :pagination="{
          total: tableData.length,
          pageSizeOptions:['10','20','30','40','50'],
          'show-size-changer': true,
          'show-quick-jumper': true
        }"
        :scroll="{ y: tableHeight  }"
      >
        <template #operation="{ record }">
          <a-button
            type="primary"
            size="small"
            @click="handleModifyRoleClick(record)"
            style="margin-right: 10px;"
          >修改角色</a-button>
          <a-button
            type="primary"
            size="small"
            @click="handleModifyDepartClick(record)"
            style="margin-right: 10px;"
          >修改部门</a-button>
          <a-button
            type="primary"
            size="small"
            @click="handleEditeClick(record)"
            style="margin-right: 10px;"
          >编辑</a-button>
          <a-button size="small" @click="handleStopClick(record)">停用</a-button>
        </template>
      </a-table>
    </div>
    <a-modal
      v-model:visible="modalVisible"
      title="修改角色"
      ok-text="确认"
      cancel-text="取消"
      @ok="hideRoleModal"
    >
      <div style="margin-bottom: 20px;">张**</div>
      <a-checkbox-group
        v-if="modalType == 'role'"
        v-model:value="roleCheckedList"
        :options="roleOptions"
      />
      <a-select v-else v-model:value="departValue" style="width: 300px;">
        <a-select-option value="gck">肛肠科</a-select-option>
        <a-select-option value="gck-1">肛肠科-一组</a-select-option>
        <a-select-option value="gck-2">肛肠科-二组</a-select-option>
        <a-select-option value="gck-3">肛肠科-三组</a-select-option>
      </a-select>
    </a-modal>
  </div>
</template>

<script>
import { reactive, toRefs, onMounted, getCurrentInstance } from 'vue';
import { getList, userList } from '@/service/user';
import { Modal } from 'ant-design-vue';
export default {
  setup() {
    const data = reactive({
      visible: false,
      formState: {
        name: '',
        cardNumber: '',
        role: '',
      },
      columns: [
        {
          title: '序号',
          width: 80,
          customRender: text => text.index + 1,
        },
        {
          title: '姓名',
          dataIndex: 'name',
        },
        {
          title: '性别',
          dataIndex: 'gender',
        },
        {
          title: '卡号',
          dataIndex: 'cardNumber',
        },
        {
          title: '证件号',
          dataIndex: 'IdNumber',
        },
        {
          title: '信息更新时间',
          dataIndex: 'updateTime',
        },
        {
          title: '图片数量',
          dataIndex: 'pictureNumber',
        },
        {
          title: '操作',
          dataIndex: 'operation',
          width: 320,
          slots: { customRender: 'operation' },
        },
      ],
      selectedRowKeys: [],
      tableData: [],
      tableHeight: document.documentElement.clientHeight - 500 + 'px',
      modalVisible: false,
      modalType: 'role',
      roleOptions: ['医生', '排班管理员', '用户管理员'],
      roleCheckedList: [],
      departValue: '',
    });
    const { proxy } = getCurrentInstance();

    onMounted(() => {
      data.tableHeight =
        document.querySelector('.box').clientHeight -
        document.querySelector('.form-box').clientHeight -
        140 +
        'px';
      window.onresize = function () {
        data.tableHeight =
          document.querySelector('.box').clientHeight -
          document.querySelector('.form-box').clientHeight -
          140 +
          'px';
      };
    });

    for (let i = 0; i < 46; i++) {
      data.tableData.push({
        key: i,
        name: `Edward King ${i}`,
        gender: i % 2 == 0 ? '男' : '女',
      });
    }

    const onSelectChange = selectedRowKeys => {
      console.log('selectedRowKeys changed: ', selectedRowKeys);
      data.selectedRowKeys = selectedRowKeys;
    };

    const handleAddUserClick = () => {
      proxy.$router.push({ path: '/user/add', query: {} });
    };

    const handleModifyRoleClick = () => {
      data.modalType = 'role';
      data.modalVisible = true;
    };

    const handleModifyDepartClick = () => {
      data.modalType = 'depart';
      data.modalVisible = true;
    };

    const handleEditeClick = () => {
      proxy.$root.$router.push({ path: '/user/edit', query: {} });
    };

    const handleStopClick = param => {
      Modal.confirm({
        title: '提示',
        // icon: createVNode(ExclamationCircleOutlined),
        content: `账号 ${param.name} 已停用！`,
        okText: '确认',
        cancelText: '取消',
      });
    };

    const hideRoleModal = () => {
      console.log(data.roleCheckedList);
    };

    return {
      ...toRefs(data),
      onSelectChange,
      handleStopClick,
      handleEditeClick,
      handleModifyDepartClick,
      handleModifyRoleClick,
      handleAddUserClick,
      hideRoleModal,
    };
  },
};
</script>
<style scoped>
.box {
  height: calc(100% - 32px);
}
.table-box {
  margin-top: 20px;
  height: calc(100% - 150px);
}
</style>
